<template>
  <div v-if="data">
    <!-- banner部分-->
    <swiper class="swiper" :options="swiperOption">
      <!-- 每个swiper-slide就是一个滚动项 -->
      <swiper-slide v-for="(item,index) in data.carouselItems" :key="index">
        <img :src="'http://www.codeboy.com:9999/'+item.img" alt="">
      </swiper-slide>
      <!-- 小圆点 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 左右箭头 -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    
    <!--/*楼梯1f*/-->
    <index-item title="首页推荐 /1F" :items="data.recommendedItems"></index-item>
    <!--楼梯2f-->
    <index-item title="最新上架 /2F" :items="data.newArrivalItems"></index-item>
    <!--楼梯3f-->
    <index-item title="热销单品 /3F" :items="data.topSaleItems"></index-item>
  </div>
</template>

<script>
import IndexItem from '../components/IndexItem.vue'
export default {
  components: { IndexItem },
  data() {
    return {
      data: null,
      // swiper的配置项
      swiperOption: {
        // 指示点配置
        pagination: {
          // el:关联元素
          el: '.swiper-pagination',
          clickable:true,//点击小圆点可以切换图片
          dynamicBullets: true
        },
        // 左右箭头配置
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 特效：fade渐变，cube立方体切换
        effect:'fade',
        // 循环播放
        loop:true,
        //自动播放
        autoplay:{
          delay:2000,//切换的时间间隔,单位ms,毫秒
          // 触摸之后停止滚动:false代表关闭此功能
          disableOnInteraction:false,
        },
      },
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData() {
      let url="http://www.codeboy.com:9999/data/product/index.php"
      this.axios.get(url).then(res=>{
        this.data=res.data
        console.log(res.data);
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.swiper{
  margin:10px auto;
  width: 1000px;
}
</style>